<template>
    <div class="swiper" @mouseover="stop()" @mouseout="play()">
        <div 
        v-for="(item,index) in items" 
        v-show="index===current" 
        :key="item.img_url" 
        :style="{width:item.w/100+'rem',height:item.h/100+'rem'}">
            <img :src="item.img_url" width="100%"/>
        </div>
    </div>
</template>
<script>
    export default {
        props:{
            // 父组件传递过来的参数items
            items:{type:Array,default(){return []}}
        },
        data(){
           return {
            current:0,//当前播放n张幻灯片
            ind:null,//停止间隔调用
            }
        },
        created(){
            this.play();
           
        },
        methods:{
            // 自动播放
            auto(){
                this.current++;
                if(this.current>=this.items.length){
                    this.current = 0;
                }
            },
            // 停止播放
            stop(){
                clearInterval(this.ind)
            },
            // 开始播放
            play(){
                this.ind = setInterval(()=>{this.auto()},3000)
            }
        }
    }
</script>